<template>
	<view class="container">
		<view class="right" style="padding: 30rpx 30rpx 90rpx; background-color: #fff; border-radius: 10rpx" v-if="details != null">
			<uni-forms ref="form">
				<uni-forms-item class="form-item" label="菜单分类名称:" name="name">
					<view class="lbl">菜单分类名称:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" placeholder="请填写菜单分类名称" v-model="details.name" />
				</uni-forms-item>
				<uni-forms-item v-if="details.parentId != 0" class="form-item" label="上级分类" name="parentId">
					<view class="lbl">上级分类:</view>
					<picker
						:disabled="disabled"
						class="form-item-right"
						style="flex: 1"
						@change="bindPicker1Change"
						v-model="details.parentId"
						:range="FoodCategoryEnum"
						:range-key="'name'"
					>
						<view class="uni-input" v-if="details.parentId != null && details.parentId > 0 && FoodCategoryEnum != null && FoodCategoryEnum.length > 0">
							{{
								details.parentId == null && details.parentId > 0
									? '无'
									: FoodCategoryEnum.find((item) => item.id == details.parentId) == null
									? '无'
									: FoodCategoryEnum.find((item) => item.id == details.parentId).name
							}}
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item class="form-item" label="手机点餐端展示" name="currencyFlag">
					<view class="lbl">手机点餐端展示:</view>
					<!-- <radio-group :disabled="disabled" class="form-item-right" name="appletShow">
            <label style="margin-right: 30rpx">
              <radio :disabled="disabled" :value="1" :checked="details.appletShow == 1" />
              <text>是</text>
            </label>
            <label>
              <radio :disabled="disabled" :value="0" :checked="details.appletShow !== 1" />
              <text>否</text>
            </label>
          </radio-group> -->
					<u-radio-group v-model="details.appletShow">
						<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
						<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
					</u-radio-group>
				</uni-forms-item>

				<!-- 菜单分类别名 -->
				<uni-forms-item class="form-item" label="菜单分类别名" name="byName">
					<view class="lbl">菜单分类别名:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.byName" placeholder="请填写菜单分类别名" />
				</uni-forms-item>

				<!-- 分类助记码 -->
				<uni-forms-item class="form-item" label="分类助记码" name="helpCode">
					<view class="lbl">分类助记码:</view>
					<uni-easyinput :disabled="disabled" class="form-item-right" type="text" v-model="details.helpCode" placeholder="请填写分类助记码" />
				</uni-forms-item>
				<!-- 出品部门 -->
				<uni-forms-item class="form-item" label="出品部门" name="departId">
					<view class="lbl">出品部门：</view>
					<picker
						:disabled="disabled"
						class="form-item-right"
						style="flex: 1"
						@change="bindPickerDepartChange"
						v-model="details.departId"
						:range="departmentList"
						:range-key="'name'"
					>
						<view class="uni-input">
							{{ departmentList.find((item) => item.id == details.departId) == null ? '无' : departmentList.find((item) => item.id == details.departId).name }}
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item class="form-item" label="排序" name="sort">
					<view class="lbl">排序:</view>
					<uni-number-box v-model="details.sort" :min="0" :max="99999"></uni-number-box>
				</uni-forms-item>
			</uni-forms>
			<view class="btn-group">
				<view @click="btnDelClick" class="btn" style="flex: 1; background-color: #f56c6c" size="mini">删除</view>
				<view @click="btnEditClick" class="btn" style="flex: 1; background-color: #f3c45d" size="mini">保存</view>
			</view>
		</view>
	</view>
</template>
<script>
import { corpId, storeId } from '../../../constants/apiConstants';
import { toastIconEnum } from '../../../constants/uiConstants';
import { umodal, utoast } from '../../../utils/uniUtils.js';
import { isIntegerOrNumericStringOrEmpty } from '../../../utils/stringUtils.js';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, onMounted, toRefs, getCurrentInstance } from '@vue/composition-api';

export default {
	name: 'editFoodCategory',

	setup() {
		// Vue生命周期
		onMounted(async () => {
			await GetDepartment();
		});

		// 生命周期函数 小程序
		onLoad(async (option) => {
			data.id = option.id;
			data.details = await GetFoodCategoryEdit({ id: option.id });

			data.details.parentId = data.details?.parentId == null ? 0 : data.details.parentId;

			if (data.details.parentId != 0) {
				const enumList = await GetFoodCategory();
				data.FoodCategoryEnum = enumList;
			}
		});

		const { proxy } = getCurrentInstance();

		// 数据
		const data = reactive({
			id: 0,
			departmentList: [], // 部门列表
			FoodCategoryList: [
				{
					id: 0,
					corpId: corpId,
					storeId: storeId,
					parentId: 0,
					name: '无上级分类',
					byName: '',
					appletShow: 1,
					helpCode: '',
					departId: 0,
					upIcon: '',
					icon: '',
					isDelete: false
				}
			], // 菜品分类列表
			details: null, //   加料详情
			FoodCategoryEnum: [
				// 上级分类
				{
					id: 0,
					name: '无上级分类',
					parentId: 0,
					corpId: corpId,
					storeId: storeId
				}
			]
		});

		/**
		 * 查
		 */
		async function GetFoodCategory(params = {}) {
			let {
				data: { list }
			} = await proxy.$api.GetFoodCategory({
				pageNum: 1,
				pageSize: 9999,
				...params
			});
			return list;
		}

		async function GetFoodCategoryEdit(params = {}) {
			let { data } = await proxy.$api.GetFoodCategoryEdit(params);
			return data;
		}

		/**
		 * 获取部门列表
		 */
		const GetDepartment = async () => {
			let {
				data: { list }
			} = await proxy.$api.GetDepartment({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('部门列表-->', list);
			data.departmentList = list;
		};

		function bindPicker1Change(e) {
			data.details.parentId = data.FoodCategoryEnum[e.detail.value].id;
		}

		/**
		 * 删
		 */
		async function DelFoodCategory() {
			return await proxy.$api.DelFoodCategory({
				id: data.details.id
			});
		}

		async function btnDelClick() {
			console.log('children-->', data.details);

			if (data.details.children.length > 0) {
				await utoast('请先删除子类！', toastIconEnum.error);
				return;
			}
			const res = await umodal();
			// 确定删除
			if (res) {
				const result = await DelFoodCategory();
				console.log(result);
				if (result.code != null && result.code == 0) {
					await utoast('删除成功！', toastIconEnum.success);
					data.disabled = true;
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/workbench/foodcategory/list'
						});
					}, 1000);
				} else {
					await utoast('删除失败！', toastIconEnum.error);
				}
			}
		}

		/**
		 * 改
		 * @returns {Promise<void>}
		 * @constructor
		 */
		async function EditFoodCategory() {
			return await proxy.$api.EditFoodCategory(data.details);
		}

		/**
		 * 编辑按钮点击事件
		 * @param item
		 */
		async function btnEditClick() {
			console.log('提交表单', data.details);
			if (!(await umodal('确认要提交吗？'))) {
				return;
			}
			data.details.name = data.details.name.trim();
			data.details.byName = data.details.byName.trim();
			data.details.helpCode = data.details.helpCode.trim();

			if (data.details.name.length == 0) {
				await utoast('名称为空！！', 'error');
				return;
			}

			// if (data.details.byName.length == 0) {
			//   await utoast('分类别名为空！', 'error');
			//   return;
			// }

			// if (data.details.helpCode.length == 0) {
			//   await utoast('助记码为空！', 'error');
			//   return;
			// }

			if (data.details.sort == null) {
				data.details.sort == 0;
			}

			if (!isIntegerOrNumericStringOrEmpty(data.details.sort)) {
				await utoast('排序必须为数字', toastIconEnum.error);
				return;
			}

			const res = await EditFoodCategory();
			if (res?.code == 0) {
				await utoast('操作成功');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/workbench/foodcategory/list'
					});
				}, 1000);
			} else {
				setTimeout(() => {
					console.log('fail', data.lock);
				}, 2000);
			}
		}

		return {
			...toRefs(data),
			bindPicker1Change,
			btnDelClick,
			btnEditClick
		};
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	overflow-y: scroll;
	padding: 0 20rpx;
	margin-top: 10rpx;
	.form-item {
		display: flex;
		align-items: center;
		padding: 14rpx 0;

		.lbl {
			width: 110px;
			font-size: 14px;
		}

		.form-item-right {
			flex: 1;
		}
	}
	.btn-group {
		display: flex;
		position: fixed;
		left: 15rpx;
		right: 15rpx;
		bottom: 0;
		height: 60px;
		.btn {
			display: flex;
			margin-right: 15px;
			align-items: center;
			justify-content: center;
			height: 49px;
			font-size: 18px;
			letter-spacing: 3px;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
		}
	}

	picker {
		flex: 1;
		border: 1px solid #cacaca;
		background-color: #fff;
		padding: 7rpx 10rpx;
		border-radius: 5px;
		position: relative;
	}
}
</style>